<template>
    <el-dialog
            title="添加角色"
            :visible.sync="message"
            :show-close="false"
            width="40%">
        <!--        内容-->
        <span>
        <el-form label-width="80px" :model="editRole" :rules="roleRules" ref="editRoleRef">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="editRole.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="editRole.roleDesc"></el-input>
            </el-form-item>
        </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="editRoleM">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {editRoleData} from "../../../network/power";

    export default {
        name: "EditRoleDia",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            },
            editRole:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        data(){
            return{
                roleRules:{
                    roleName:[{required: true, message: '请输入角色名称', trigger: 'blur'}],
                    roleDesc:[{required: true, message: '请输入描述信息', trigger: 'blur'}]
                }
            }
        },
        methods:{
            quit(){
                this.$bus.$emit('editRole')
            },
            //编辑角色
            editRoleM(){
                this.$refs.editRoleRef.validate(valid => {
                    if (valid){
                        const data = {
                            roleName:this.editRole.roleName,
                            roleDesc:this.editRole.roleDesc
                        };
                        console.log(data);
                        editRoleData(this.editRole.id,data).then(res =>{
                            if(res.data.meta.status !== 200){
                                this.$message.error(res.data.meta.msg)
                            }
                            this.$message.success('编辑成功');
                            this.$bus.$emit('editRole');
                            this.$bus.$emit('getRolesList')
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>

</style>